<!--
 * @Description:
 * @Author: zhailei
 * @Date: 2021-01-18 15:17:30
 * @LastEditTime: 2021-07-26 17:22:22
 * 
 * @FilePath: \vite-demoe:\wwwroot\Vue\\-cloud-vue\src\pages\system\dicSet\masterEdit.vue
-->
<template>
  <t-modal
    :title="title"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="
      () => {
        $emit('ok');
      }
    "
    @cancel="
      () => {
        $emit('cancel');
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form :form="form">
        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
        <a-form-item class="hiddenItem">
          <a-input v-decorator="['uuid']" type="hidden" />
        </a-form-item>
        <a-form-item
          label="上级节点"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-tree-select
            show-search
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="上级节点"
            allow-clear
            tree-default-expand-all
            :replaceFields="replaceFields"
            :tree-data="treeData"
            treeNodeFilterProp="title"
            v-decorator="[
              'pid',
              {
                rules: [{ required: true, message: '请选择父级节点！' }],
              },
            ]"
          >
          </a-tree-select>
        </a-form-item>
        <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            placeholder="名称"
            v-decorator="[
              'dicSetName',
              {
                rules: [{ required: true, message: '请输入名称！' }],
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            placeholder="编码"
            v-decorator="[
              'dicSetCode',
              {
                rules: [{ required: true, message: '请输入编码！' }],
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number
            placeholder="排序"
            :min="1"
            :max="99999"
            v-decorator="[
              'dicSetSort',
              { rules: [{ required: true, message: '请输入排序！' }] },
            ]"
          />
        </a-form-item>
        <!-- <a-form-item
         label="备注"
         :labelCol="labelCol"
         :wrapperCol="wrapperCol"
       >
         <a-textarea
           placeholder="备注"
           :auto-size="{ minRows: 2, maxRows: 6 }"
           v-decorator="['remark']"
         />
       </a-form-item> -->
      </a-form>
    </a-spin>
  </t-modal>
</template>

<script>
import pick from "lodash.pick";

// 表单字段
const fields = ["uuid", "pid", "dicSetName", "dicSetCode", "dicSetSort"];

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    model: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    return {
      title: "",
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 7,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 13,
        },
      },
      form: this.$form.createForm(this),
      treeData: [],
      replaceFields: {
        children: "children",
        title: "dicSetName",
        key: "id",
        value: "id",
      },
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.loadData();
        }
      },
      immediate: true,
    },
  },

  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v));

    // 当 model 发生改变时，为表单设置值
    this.$watch("model", () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields));
    });
  },
  mounted() {},
  methods: {
    add(m) {
      console.log("add------m", m);
    },
    edit(m) {
      console.log("edit------m", m);
      // fields.forEach((v) => this.form.getFieldDecorator(v));
      // this.form.setFieldsValue(pick(m, fields));
    },
    loadData() {
      this.$post("/system/dicSet/getTreeAllSysDicSetData").then((res) => {
        if (res.statusCode === 200) {
          this.treeData = res.data;
        }
      });
    },
  },
};
</script>
